<template>
  <el-dialog
    width="735px"
    :visible.sync="dialogVisible"
    class="con-dialog"
    :close-on-click-modal="false"
    @open="openDialog"
    append-to-body
  >
    <el-steps :active="activeIndex" align-center>
      <el-step title="合并异常表"></el-step>
      <el-step title="MQ去重"></el-step>
      <el-step title="全量对比答案与MQ"></el-step>
      <el-step title="从MQ中更新答案"></el-step>
    </el-steps>

    <div v-if="activeIndex==1" class="content-body">
      <div class="b-cont"
           v-loading="vLoading"
           :element-loading-text="titleLoading"
           element-loading-spinner="el-icon-loading"
      >
        <div class="info">{{content}}</div>
      </div>
      <div class="btnB">
        <el-button type="primary" @click="toTwoPage" :disabled="vLoading">合并完成，下一步</el-button>
      </div>
    </div>
    <div v-if="activeIndex==2" class="content-body">
      <div class="b-cont"
           v-loading="vLoading"
           :element-loading-text="titleLoading"
           element-loading-spinner="el-icon-loading"
      >
        <div class="info">{{content}}</div>
      </div>
      <div class="btnB">
        <el-button v-if="isShowEmpty" @click="cleanUpOldData" :disabled="vLoading">清空并重新执行</el-button>
        <el-button type="primary" @click="toThreePage" :disabled="vLoading">
          <span v-if="!isShowEmpty">操作完成，下一步</span>
          <span v-if="isShowEmpty">直接下一步</span>
        </el-button>
      </div>
    </div>
    <div v-if="activeIndex==3" class="content-body">
      <div class="b-cont"
           v-loading="vLoading"
           :element-loading-text="titleLoading"
           element-loading-spinner="el-icon-loading"
      >
        <div class="table-txt">注：以下考生答案文件为-1，MQ为非-1，请查阅后更新数据</div>
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%">
          <el-table-column align="center" prop="provinceName" label="省份"/>
          <el-table-column align="center" prop="kaodian" label="考点"/>
          <el-table-column align="center" prop="jifang" label="机房"/>
          <el-table-column align="center" prop="studentName" label="姓名"/>
          <el-table-column align="center" prop="zkzNum" label="准考证"/>
          <el-table-column align="center" prop="num" label="答案为-1条数" width="110"/>
          <el-table-column align="center" prop="mqNum" label="MQ为非-1条数" width="110"/>
        </el-table>
      </div>
      <div class="btnB">
        <el-button type="primary" @click="toFourPage" :disabled="vLoading">下一步</el-button>
      </div>
    </div>
    <div v-if="activeIndex==4" class="content-body">
      <div class="b-cont"
           v-loading="vLoading"
           :element-loading-text="titleLoading"
           element-loading-spinner="el-icon-loading"
      >
        <div class="info">{{content}}</div>
      </div>
      <div class="btnB">
        <el-button type="primary" @click="cancel" :disabled="vLoading">更新完成</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import Cookies from "js-cookie";
  import {
    unionFormalAnswer,
    cleanRedundantMq,
    cleanUpOldData,
    listUnAssemblyData,
    updateAnswerFromMq,
    getStepStatus
  } from "@/api/toolsystem/downloadAnswer";
  export default {
    name: "combination",
    props:{
      dialogVisibleFu:Boolean,
    },
    data() {
      return {
        dialogVisible:this.dialogVisibleFu,
        activeIndex: 1,
        isShowEmpty: false, // 是否展示清空按钮
        vLoading: false,// 加载
        titleLoading:'',// 加载文字
        tableData: [],// 表格数据
        content: '',
        timer: null // 定时器
      };
    },
    created() {
      const down_activeIndex = Number(Cookies.get("tool_system_down_activeIndex"))
      if(down_activeIndex){
        this.activeIndex = down_activeIndex
      }else {
        this.activeIndex = 1
        Cookies.set("tool_system_down_activeIndex", 1);
      }
    },
    methods: {
      toTwoPage(){
        this.activeIndex = 2
        this.cleanRedundantMq()
        this.timer = setInterval(()=>{
          this.getStepStatus(2)
        },2000)
      },
      toThreePage(){
        this.activeIndex = 3
        this.listUnAssemblyData()
      },
      toFourPage(){
        this.activeIndex = 4
        this.updateAnswerFromMq()
        this.timer = setInterval(()=>{
          this.getStepStatus(4)
        },2000)
      },

      // 打开弹框时调用
      openDialog(){
        const aIdx = this.activeIndex;
        let step;
        if(aIdx==1){
          this.unionFormalAnswer();
          step=1;
        }else if(aIdx==2){
          this.cleanRedundantMq();
          step=2;
        }else if(aIdx==3){
          return this.listUnAssemblyData();
        }else if(aIdx==4){
          this.updateAnswerFromMq();
          step=4;
        }
        this.timer = setInterval(()=>{
          this.getStepStatus(step);
        },2000)
      },
      // 关闭
      cancel(){
        this.dialogVisible = false
        this.$emit('closeDialog', false)
        this.activeIndex = 1
        Cookies.set("tool_system_down_true", 1); // 标记最少完成过一次 一键合并
      },

      // 进度
      getStepStatus(step) {
        getStepStatus(step)
          .then(response => {
            console.log(response)
            if (response.code != 200) {
              return;
            }
            if(response.data==true){
              if(step==1){
                this.content = '操作成功'
              }else if(step==2){
                this.content = '操作成功'
              }else if(step==4){
                this.content = '更新完成'
              }
              this.vLoading = false;
              clearInterval(this.timer)
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 第4步-修改数据
      updateAnswerFromMq() {
        this.content = '';
        this.vLoading = true;
        this.titleLoading = '正在更新中'
        updateAnswerFromMq()
          // .then(response => {
          //   if (response.code != 200) {
          //     this.vLoading = false;
          //     return this.msgError(response.msg);
          //   }
          //   this.content = '更新完成'
          //   this.vLoading = false;
          // })
          // .catch(error => {
          //   this.vLoading = false;
          //   console.log(error);
          // });
      },
      // 第3步-获取异常列表
      listUnAssemblyData() {
        this.content = '';
        this.vLoading = true;
        this.titleLoading = '加载中'
        listUnAssemblyData()
          .then(response => {
            if (response.code != 200) {
              this.vLoading = false;
              return this.msgError(response.msg);
            }
            this.tableData= response.rows
            this.vLoading = false;
          })
          .catch(error => {
            this.vLoading = false;
            console.log(error);
          });
      },
      // 第2.1步-清除操作
      cleanUpOldData() {
        this.vLoading = true;
        this.titleLoading = '正在执行MQ相关操作'
        cleanUpOldData()
          .then(response => {
            if (response.code != 200) {
              this.vLoading = false;
              return this.msgError(response.msg);
            }
            this.content = '';
            this.isShowEmpty = false
            this.cleanRedundantMq()
            this.timer = setInterval(()=>{
              this.getStepStatus(2)
            },2000)
          })
          .catch(error => {
            this.vLoading = false;
            console.log(error);
          });
      },
      // 第2.0步-mq相关操作
      cleanRedundantMq() {
        this.content = '';
        this.vLoading = true;
        this.titleLoading = '正在执行MQ相关操作'
        cleanRedundantMq()
          .then(response => {
            if (response.code != 200) {
              return;
            }
            clearInterval(this.timer);
            this.vLoading = false
            if (response.msg == 'needCleanMq') {
              this.isShowEmpty = true;
              return this.content = '系统检测到已存在MQ去重表,是否清空并重新执行相关操作？'
            }
            this.content = '操作成功'
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 第1步-合并数据
      unionFormalAnswer() {
        this.content = '';
        this.vLoading = true;
        this.titleLoading = '正在合并中'
        unionFormalAnswer()
          // .then(response => {
          //   if (response.code != 200) {
          //     this.vLoading = false;
          //     return this.msgError(response.msg);
          //   }
          //   this.content = response.msg
          //   this.vLoading = false;
          // })
          // .catch(error => {
          //   this.vLoading = false;
          //   console.log(error);
          // });
      }
    },
    watch: {
      dialogVisibleFu(val){
        this.dialogVisible = val
      },
      activeIndex(value){
        this.activeIndex = value
        Cookies.set("tool_system_down_activeIndex", value);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/assets/styles/step.scss";
  .con-dialog{
    /*background-color: rgba(0, 0, 0, 0.8);*/
    ::v-deep .el-dialog{
      margin: 0 !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .el-dialog__header{
        padding: 0;
        padding-bottom: 0;
        .el-icon-close:before{
          content: "";
        }
      }
    }
  }
  .content-body{
    padding: 10px 0;
    .b-cont{
      position: relative;
      height: 270px;
      .info{
        font-size: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .table-txt{
        font-size: 13px;
        line-height: 20px;
        color: #7f7f7f;
      }
    }
    .btnB{
      text-align: center;
      margin-top: 10px;
    }
  }
  ::v-deep .el-steps{
    .el-step__icon{
      width: 30px;
      height: 30px;
    }
    .el-step__head{
      &.is-process{
        color: #C0C4CC;
        border-color: #C0C4CC;
      }
    }
    .el-step__title{
      line-height: 20px;
      margin-top: 5px;
      &.is-process{
        color: #C0C4CC;
        font-weight: 500;
      }
    }
    .el-step__description{
      margin-top: 0 !important;
      &.is-process{
        color: #C0C4CC;
        font-weight: 500;
      }
    }
  }

</style>

